<template>
  <n-card title="闲书列表">
    <div>
      <n-button type="primary" dashed size="small" @click="jumpBtn">
        <template #icon>
          <n-icon>
            <AddCircleOutline />
          </n-icon>
        </template>
        发布
      </n-button>
    </div>
    <br />
    <div>
      <n-spin :show="loading">
        <n-data-table
          :columns="columns"
          :data="notesData"
          default-expand-all
          style="margin-bottom: 10px; width: 100%"
          :max-height="tableHeight"
          :scroll-x="1500"
        />

        <div style="display: flex; justify-content: flex-end">
          <n-pagination
            v-model:page="queryInfo.pageIndex"
            v-model:page-size="queryInfo.pageSize"
            :page-count="total"
            :on-update:page="updatePage"
            :on-update:page-size="updatePageSize"
            show-size-picker
            :page-sizes="[10, 20, 30, 40]"
          />
        </div>
      </n-spin>
    </div>
    <my-dialog
      @closeModal="closeModal"
      :showModal="showModal"
      ref="myDialogRef"
    ></my-dialog>
  </n-card>
</template>

<script setup lang="ts">
import {
  AddCircleOutline
} from "@vicons/ionicons5";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { adminMenus } from "@/data/menu.ts";
import { getNotesList, deleteById } from "@/api/notes";
import { h, inject, onMounted, ref } from "vue";
import {
  NButton,
  NIcon,
  NImage,
  NPopconfirm,
  NPopover,
  NSwitch,
  NTag,
} from "naive-ui";
import myDialog from "@/components/contentView.vue";
import { notesQueryRequest } from "@/models/articleModel";

const tableHeight = ref(inject("tableHeight"));
const router = useRouter();
const store = useStore();
const total = ref(0);
const loading = ref(false);
const notesData = ref([]);
const showModal = ref(false);
const myDialogRef = ref(null);
const columns = ref([
  {
    type: "selection",
    fixed: "left",
  },
  {
    title: "闲书标题",
    key: "title",
    width: 250,
    render(row) {
      return [
        h(
          "a",
          {
            style: "color:#0093ff;cursor: pointer;text-decoration: underline;",
            onClick: () => {
              showModal.value = true;
              myDialogRef.value?.init(row.id, false, 2);
            },
          },
          { default: () => row.title }
        ),
      ];
    },
  },
  {
    title: "心情",
    key: "mood",
    render: (row) => {
      if (row.mood != null)
        return h(
          NTag,
          {
            style: {
              marginRight: "6px",
            },
            type: "success",
            bordered: false,
          },
          {
            default: () => row.mood,
          }
        );
    },
  },
  {
    title: "天气",
    key: "weather",
    render(row) {
      if (row.weather)
        return h(
          NTag,
          {
            style: {
              marginRight: "6px",
            },
            type: "success",
            bordered: false,
          },
          {
            default: () => row.weather,
          }
        );
    },
  },
  {
    title: "是否红旗",
    key: "isRedFlag",
    render(row) {
      return h(
        NSwitch,
        {
          style: {
            marginRight: "6px",
          },
          onUpdateValue: (value) => {
            window.$message.success(value + "");
          },
          defaultValue: row.isRedFlag,
        },
        {
          default: () => row.isRedFlag,
        }
      );
    },
  },
  {
    title: "是否私密",
    key: "isPrivacy",
    render(row) {
      return h(
        NSwitch,
        {
          style: {
            marginRight: "6px",
          },
          onUpdateValue: (value) => {
            window.$message.success(value + "");
          },
          defaultValue: row.isPrivacy,
        },
        {
          default: () => row.isPrivacy,
        }
      );
    },
  },
  {
    title: "是否可用",
    key: "enable",
    render(row) {
      return h(
        NSwitch,
        {
          style: {
            marginRight: "6px",
          },
          onUpdateValue: (value) => {
            window.$message.success(value + "");
          },
          defaultValue: row.enable,
        },
        {
          default: () => row.enable,
        }
      );
    },
  },
  {
    title: "是否评论",
    key: "isComments",
    render(row) {
      return h(
        NSwitch,
        {
          style: {
            marginRight: "6px",
          },
          onUpdateValue: (value) => {
            window.$message.success(value + "");
          },
          defaultValue: row.isComments,
        },
        {
          default: () => row.isComments,
        }
      );
    },
  },
  {
    title: "浏览数",
    key: "browse",
  },
  {
    title: "喜欢",
    key: "like",
  },
  {
    title: "操作",
    key: "actions",
    fixed: "right",
    render(row) {
      return [
        h(
          NPopconfirm,
          {
            positiveButtonProps: {
              size: "tiny",
            },
            negativeButtonProps: {
              size: "tiny",
            },
            onPositiveClick: (e) => {
              deleteById({ id: row.id }).then((res) => {
                if (res.code == 200) {
                  window.$message.success(res.message);
                  getNotesListFunc();
                } else {
                  window.$message.error(res.message);
                }
              });
            },
          },
          {
            trigger: () => {
              return h(
                NButton,
                {
                  style: { marginRight: "10px" },
                  strong: true,
                  secondary: true,
                  type: "error",
                  size: "small",
                },
                { default: () => "删除" }
              );
            },
            default: () => {
              return "确定要删除？";
            },
          }
        ),
        h(
          NButton,
          {
            strong: true,
            secondary: true,
            type: "warning",
            size: "small",
            onClick: () => updateNotes(row),
          },
          { default: () => "编辑" }
        ),
      ];
    },
    width: 150,
  },
]);
const queryInfo = ref<notesQueryRequest>({
  pageIndex: 1,
  pageSize: 10,
});

onMounted(() => {
  getNotesListFunc();
});
const updatePage = (value) => {
  queryInfo.value.pageIndex = value;
  getNotesListFunc();
};
const updatePageSize = (value) => {
  queryInfo.value.pageSize = value;
  getNotesListFunc();
};
const getNotesListFunc = () => {
  loading.value = true;
  getNotesList(queryInfo.value)
    .then((res) => {
      notesData.value = res.data.result;
      loading.value = false;
      total.value = res.data.totalPage;
    })
    .catch((err) => {
      loading.value = false;
    });
};
const jumpBtn = () => {
  let path = "/notes/publish";
  router.push({ path: path, replace: true });
  let index = 0;
  for (let i = 0; i < adminMenus.length; i++) {
    const element = adminMenus[i];
    for (let j = 0; j < element.children.length; j++) {
      let cKey = element.children[j].key;
      console.log(element.children[j].key);
      if (cKey == path) {
        index = i;
        break;
      }
    }
  }
  store.dispatch("updateMenuKeySaync", index);
  store.dispatch("updateChildrenKeySaync", path);
};
const closeModal = () => {
  showModal.value = false;
};
const updateNotes = (row) => {
  router.push({ path: "/notes/publish", query: { id: row.id } });
};
</script>
